<template>
  <view class="container">
    <!-- 资讯头部 -->
    <view class="news-header">
      <image :src="newsDetail.image" class="header-image" mode="aspectFill" />
      <view class="header-overlay">
        <view class="news-meta">
          <view class="news-tag" :class="newsDetail.category">{{ getCategoryLabel(newsDetail.category) }}</view>
          <text class="news-time">{{ formatTime(newsDetail.createTime) }}</text>
        </view>
        <text class="news-title">{{ newsDetail.title }}</text>
        <view class="news-stats">
          <text class="stat-item">{{ newsDetail.views || 0 }} 阅读</text>
          <text class="stat-item">{{ newsDetail.likes || 0 }} 点赞</text>
        </view>
      </view>
    </view>

    <!-- 资讯内容 -->
    <view class="news-content">
      <view class="content-section">
        <text class="content-text">{{ newsDetail.content }}</text>
      </view>

      <!-- 相关图片 -->
      <view class="content-section" v-if="newsDetail.images && newsDetail.images.length > 0">
        <view class="section-title">相关图片</view>
        <view class="image-gallery">
          <image 
            v-for="(img, index) in newsDetail.images" 
            :key="index"
            :src="img" 
            class="gallery-image" 
            mode="aspectFill"
            @click="previewImage(img, newsDetail.images)"
          />
        </view>
      </view>

      <!-- 相关链接 -->
      <view class="content-section" v-if="newsDetail.links && newsDetail.links.length > 0">
        <view class="section-title">相关链接</view>
        <view class="link-list">
          <view 
            class="link-item" 
            v-for="(link, index) in newsDetail.links" 
            :key="index"
            @click="openLink(link)"
          >
            <text class="link-icon">🔗</text>
            <text class="link-text">{{ link.title }}</text>
            <text class="link-arrow">></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作栏 -->
    <view class="action-bar">
      <view class="action-item" @click="toggleLike">
        <text class="action-icon" :class="{ active: isLiked }">{{ isLiked ? '❤️' : '🤍' }}</text>
        <text class="action-text">点赞</text>
      </view>
      <view class="action-item" @click="shareNews">
        <text class="action-icon">📤</text>
        <text class="action-text">分享</text>
      </view>
      <view class="action-item" @click="copyLink">
        <text class="action-icon">🔗</text>
        <text class="action-text">复制链接</text>
      </view>
    </view>

    <!-- 相关推荐 -->
    <view class="related-section" v-if="relatedNews.length > 0">
      <view class="section-title">相关推荐</view>
      <view class="related-list">
        <view 
          class="related-item" 
          v-for="(item, index) in relatedNews" 
          :key="index"
          @click="goToRelated(item)"
        >
          <image :src="item.image" class="related-image" mode="aspectFill" />
          <view class="related-info">
            <text class="related-title">{{ item.title }}</text>
            <text class="related-time">{{ formatTime(item.createTime) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getNewsDetail, likeNews, getNewsList } from '../../api/news.js'

export default {
  data() {
    return {
      newsId: null,
      isLiked: false,
      newsDetail: {},
      relatedNews: []
    }
  },
  onLoad(options) {
    this.newsId = options.id
    this.loadNewsDetail()
    this.loadRelatedNews()
  },
  methods: {
    async loadNewsDetail() {
      try {
        uni.showLoading({ title: '加载中...' })
        const result = await getNewsDetail(this.newsId)
        if (result.code === 200) {
          this.newsDetail = result.data
        } else {
          uni.showToast({
            title: result.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载资讯详情失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    async loadRelatedNews() {
      try {
        const result = await getNewsList('all', '')
        if (result.code === 200) {
          // 过滤掉当前资讯，取前3条作为相关推荐
          this.relatedNews = result.data
            .filter(news => news.id != this.newsId)
            .slice(0, 3)
        }
      } catch (error) {
        console.error('加载相关资讯失败:', error)
      }
    },
    
    getCategoryLabel(category) {
      const categories = {
        announcement: '场馆公告',
        activity: '活动资讯',
        training: '培训课程',
        competition: '赛事信息',
        health: '健康知识'
      }
      return categories[category] || '其他'
    },
    
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
    },
    
    async toggleLike() {
      try {
        const result = await likeNews(this.newsId)
        if (result.code === 200) {
          this.isLiked = !this.isLiked
          if (this.isLiked) {
            this.newsDetail.likes = (this.newsDetail.likes || 0) + 1
            uni.showToast({
              title: '点赞成功',
              icon: 'success'
            })
          } else {
            this.newsDetail.likes = Math.max(0, (this.newsDetail.likes || 0) - 1)
            uni.showToast({
              title: '取消点赞',
              icon: 'none'
            })
          }
        } else {
          uni.showToast({
            title: result.message || '操作失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('点赞失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      }
    },
    
    shareNews() {
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              uni.showToast({ title: '分享到微信', icon: 'none' })
              break
            case 1:
              uni.showToast({ title: '分享到朋友圈', icon: 'none' })
              break
            case 2:
              this.copyLink()
              break
          }
        }
      })
    },
    
    copyLink() {
      const link = `https://badminton.com/news/${this.newsDetail.id}`
      uni.setClipboardData({
        data: link,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
        }
      })
    },
    
    previewImage(current, urls) {
      uni.previewImage({
        current: current,
        urls: urls
      })
    },
    
    openLink(link) {
      if (link.url && link.url.startsWith('/')) {
        uni.navigateTo({ url: link.url })
      } else {
        uni.showToast({
          title: '外部链接暂不支持',
          icon: 'none'
        })
      }
    },
    
    goToRelated(news) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${news.id}`
      })
    }
  }
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 资讯头部 */
.news-header {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.header-image {
  width: 100%;
  height: 100%;
}

.header-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 20px;
  color: white;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.news-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.2);
}

.news-tag.announcement {
  background: rgba(24, 144, 255, 0.8);
}

.news-tag.activity {
  background: rgba(82, 196, 26, 0.8);
}

.news-tag.training {
  background: rgba(250, 140, 22, 0.8);
}

.news-tag.competition {
  background: rgba(245, 34, 45, 0.8);
}

.news-tag.health {
  background: rgba(114, 46, 209, 0.8);
}

.news-time {
  font-size: 12px;
  opacity: 0.8;
}

.news-title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 10px;
}

.news-stats {
  display: flex;
  gap: 15px;
}

.stat-item {
  font-size: 12px;
  opacity: 0.8;
}

/* 资讯内容 */
.news-content {
  background: white;
  margin: 15px;
  border-radius: 12px;
  overflow: hidden;
}

.content-section {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.content-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.content-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 图片画廊 */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-image {
  width: calc(50% - 5px);
  height: 120px;
  border-radius: 8px;
}

/* 链接列表 */
.link-list {
  display: flex;
  flex-direction: column;
}

.link-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.link-item:last-child {
  border-bottom: none;
}

.link-icon {
  font-size: 16px;
  margin-right: 10px;
}

.link-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.link-arrow {
  font-size: 14px;
  color: #999;
}

/* 操作栏 */
.action-bar {
  display: flex;
  background: white;
  margin: 15px;
  border-radius: 12px;
  padding: 15px;
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.action-icon {
  font-size: 20px;
}

.action-icon.active {
  color: #ff4757;
}

.action-text {
  font-size: 12px;
  color: #666;
}

/* 相关推荐 */
.related-section {
  background: white;
  margin: 15px;
  border-radius: 12px;
  padding: 20px;
}

.related-list {
  display: flex;
  flex-direction: column;
}

.related-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.related-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.related-image {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  margin-right: 12px;
}

.related-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.related-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 1.3;
}

.related-time {
  font-size: 12px;
  color: #999;
}
</style> 